<!-- 顶部栏 -->
<template>
  <!-- 最初顶部栏没有背景色，在layout-top-bar中写了一个important级别的背景色，我把它改成了主题色了 -->
  <div
    class="layout-top-bar"
    :class="[tabStyle]"
    :style="{ width: topBarWidth(), background: getMenuTheme.background }"
  >
    <div class="menu">
      <div class="left" style="display: flex">
        <!-- 
          系统信息
          1.水平导航时出现Logo
          2.屏幕宽度>1400px时出现系统名称
         -->
        <div class="top-header" v-if="isHorizontalMenu">
          <Logo class="logo" />
          <p v-if="screenWidth >= 1400">{{ AppConfig.systemInfo.name }}</p>
        </div>

        <!-- 这个Logo是display:none ?? -->
        <Logo class="logo2" />

        <!-- 菜单按钮 -->
        <div class="btn-box" v-if="isVerticalMenu && shouldShowMenuButton">
          <div class="btn menu-btn">
            <i class="iconfont-sys" @click="visibleMenu">&#xe6ba;</i>
          </div>
        </div>
      </div>

      <div class="right">
        <!-- 切换主题，例如暗黑和白天 -->
        <!-- v-if="shouldShowThemeToggle" -->
        <div class="btn-box" @click="themeAnimation">
          <div class="btn theme-btn">
            <i class="iconfont-sys">{{ isDark ? "&#xe6b5;" : "&#xe725;" }}</i>
          </div>
        </div>
      </div>
    </div>
    <!-- <ArtWorkTab /> -->

    <!-- <ArtNotification v-model:value="showNotice" ref="notice" /> -->
  </div>
</template>

<script lang="ts" setup>
import { MenuWidth, MenuTypeEnum } from "@/constants/enums/menuEnum";

import AppConfig from "@/config";

import Logo from "@/layouts/components/Logo/index.vue";

import { useMenuStore } from "@/stores/modules/menu";
import { useTabStore } from "@/stores/modules/tabs";
import { useThemeStore } from "@/stores/modules/theme";
import { useRouter } from "vue-router";
import { themeAnimation } from "@/utils/theme/themeControl";
defineOptions({ name: "HeaderBar" });

const tabStore = useTabStore();
const menuStore = useMenuStore();
const themeStore = useThemeStore();
const router = useRouter();

const { menuOpen, menuType } = storeToRefs(menuStore);
const { tabStyle } = storeToRefs(tabStore);
const { getMenuTheme, isDark } = storeToRefs(themeStore);

/** 调用vueuse中的方法获取屏幕宽度 */
const { width: screenWidth } = useWindowSize();

//#region 菜单类型判断
/** 菜单类型判断 ?? 是否有必要四个计算属性 */
const isVerticalMenu = computed(() => {
  return menuType.value === MenuTypeEnum.Vertical;
});
const isDoubleMenu = computed(() => {
  return menuType.value === MenuTypeEnum.Two_Column;
});
const isHorizontalMenu = computed(() => {
  return menuType.value === MenuTypeEnum.Horizontal;
});
const isCompositeMenu = computed(() => {
  return menuType.value === MenuTypeEnum.Composite;
});
//#endregion

/**
 * 计算顶部导航栏宽度
 * @returns {string} 计算后的宽度值
 */
function topBarWidth(): string {
  const { Horizontal, Two_Column, Composite } = MenuTypeEnum;
  const { getMenuOpenWidth } = menuStore;
  const { isFirstLevel } = router.currentRoute.value.meta;
  const type = menuType.value;
  const isMenuOpen = menuOpen.value;

  const isTopLayout =
    type === Horizontal || (type === Composite && isFirstLevel);

  //如果开启了顶部导航
  if (isTopLayout) {
    return "100%";
  }

  //如果开启了双列布局
  if (type === Two_Column) {
    return isFirstLevel
      ? "calc(100% - 80px)"
      : `calc(100% - 80px - ${getMenuOpenWidth})`;
  }

  return isMenuOpen
    ? `calc(100% - ${getMenuOpenWidth})`
    : `calc(100% - ${MenuWidth.CLOSE})`;
}

/** 顶部功能栏配置 */
// 顶部栏功能配置
// const {
//   shouldShowMenuButton,
//   shouldShowRefreshButton,
//   shouldShowFastEnter,
//   shouldShowBreadcrumb,
//   shouldShowGlobalSearch,
//   shouldShowFullscreen,
//   shouldShowNotification,
//   shouldShowChat,
//   shouldShowLanguage,
//   shouldShowSettings,
//   shouldShowThemeToggle,
//   fastEnterMinWidth: headerBarFastEnterMinWidth,
// } = useHeaderBar();

//#region 菜单
/** 是否展示菜单 */
const shouldShowMenuButton = computed(() => menuStore.showMenuButton);

/**
 * 切换菜单显示/隐藏状态
 */
function visibleMenu(): void {
  menuStore.setMenuOpen(!menuOpen.value);
}
//#endregion

//#region 主题
// const shouldShowThemeToggle=
//#endregion
</script>

<style lang="scss" scoped>
@use "./styles/style.scss";
@use "./styles/mobile.scss";
</style>
